<template>
  <div id="cardBox">
    <el-card :body-style="{ padding: '10px' }" shadow="hover">
      <div>
        <el-row :gutter="50">
          <el-col :span="6">
            <img
              :src="baseUrl + article.thumbnail + '?r=' + Math.random()*1000"
              class="image"
            />
          </el-col>
          <el-col :span="18">
          <div @click="onClick(article.id)">
            <el-row id="header">
              <el-col :span="24">
                <span class="title">{{article.title}}</span>
              </el-col>
            </el-row>
            <el-row class="tags">
              <el-col :span="20">
                <span>
                  <el-row :gutter="10">
                    <el-col :span="3.3">
                      <span>标签:</span>
                    </el-col>
                    <el-col 
                      v-for="tag in article.tags" 
                      :key="tag"
                    :span="5.5">
                      <el-tag effect="plain">{{tag.name}}</el-tag>
                    </el-col>
                    <!-- <el-col :span="5.5">
                      <el-tag effect="plain">Tag 2</el-tag>
                    </el-col>
                    <el-col :span="5.5">
                      <el-tag effect="plain">Tag 2</el-tag>
                    </el-col> -->
                  </el-row>
                </span>
              </el-col>
              <el-col :span="4">
                <span>
                  类别: <el-tag effect="plain" type="success">{{article.category}}</el-tag>
                </span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <p>{{article.summary}}</p>
              </el-col>
            </el-row>
          </div>
            <el-row id="rooter">
              <el-col :span="8">
                <div class="time1">
                  <el-icon class="time-icon" :size="12"><Clock /></el-icon><span class="time">{{article.updateTime}}</span>
                </div>
              </el-col>
              <el-col :span="10">
                <el-rate
                  v-model="score"
                  disabled
                  show-score
                  score-template="{value}"
                  size="small"
                />
              </el-col>
              <el-col :span="3">
                <div class="time2">
                  <el-icon class="time-icon" :size="12"><View /></el-icon><span class="time">{{article.view}}</span>
                </div>
              </el-col>
              <el-col :span="3">
                <el-button :disabled="disable" type="primary" circle @click="toEdit(article.id)">
                  <el-icon><Edit /></el-icon>
                </el-button>
                <el-button :disabled="disable" type="danger" circle @click="dialogVisible = true">
                  <el-icon><Delete /></el-icon>
                </el-button>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-dialog
      v-model="dialogVisible"
      title="注意"
      width="30%"
    >
      <div>你确定要删除该文章？</div>
      <div>文章标题为: 【{{article.title}}】</div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="toDelete(article.id)">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import api from '../../api/data.js'
import { ElMessage } from 'element-plus'
// import {mapState} from 'vuex'
import {Clock, View, Delete, Edit} from '@element-plus/icons-vue'
export default {
  name: 'MyCard',
  components: {
    Clock,
    View,
    Delete, 
    Edit
  },
  props: {
    article: {
      type: Object,
      default: () => ({
        category: "无数据",
        summary: "无数据",
        id: null,
        updateTime: "无数据",
        view: 0,
        score: 5,
        title: "无数据",
        thumbnail: "https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png",
        tags: [
          {name: "Java"},
          {name: "Spring"},
          {name: "SpringMVC"}
        ]
      })
    },
    disable: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      score: 0,
      baseUrl: api.baseUrl,
      dialogVisible: false,
    }
  },
  methods: {
    onClick (id) {
      this.$router.push({path: '/article', query: {articleId: id}})
    },
    toEdit (id) {
      this.$router.push({path: '/update', query: {articleId: id}})
    },
    toDelete (id) {
      this.dialogVisible = false
      api.deleteArticle({
        token: this.$store.state.token,
        articleId: id,
      }).then((res) => {
        if (res.code === 342) {
          this.$store.commit('logout')
          this.$store.commit('tokenError')
          this.$router.push({path: '/login'})
        } else if (res.code < 300) {
          this.$store.commit('pageChanged')
          ElMessage({
            message: res.message,
            type: 'success',
          })
        } else {
          ElMessage.error(res.message)
        }
      })
    },
  },
  computed: {
  },
  mounted () {
    this.score = this.article.score
  }
}
</script>

<style scoped>
#cardBox {
  width: 54vw;
  cursor: pointer;
}
#header {
  margin-top: 8px;
}
#rooter {
  /* display: flex; */
  /* position: absolute; */
  /* bottom: 0; */
  flex: 1
}
.time {
  font-size: 14px;
  color: #999;
  margin-left: 4px;
}
.time1 {
  margin-top: 4px;
}
.time2 {
  margin-top: 4px;
}
p {
  word-wrap: break-word;
  height: 10vh;
}
.title {
  width: 42vw;
  font-size: 22px;
  font-weight: bold;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: -webkit-box;
}
.tags {
  margin-top: 14px;
}
/* .bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button {
  padding: 0;
  min-height: auto;
} */

.image {
  width: 13vw;
  height: 23vh;
  display: block;
}
</style>
